<template>
    <div class="t3">
        <div class="top" >
            <div class="top_left">
                {{name}}
            </div>
            <div class="top_right" @click="gotoAll(id)">
                查看全部 >
            </div>
        </div>
        <div class="cont">
            <div class="content" v-for="(item,i) in contData" :key="i" @click="gotoCartoon(item)">
                <div class="img">
                    <img v-lazy="item.vertical_cover" alt="">
                </div>
                <div class="name">{{item.title}}</div>
                <div class="title">{{item.recommendation!='' ? item.recommendation :'更新至'+item.last_short_title+'话'}}</div>
            </div>
        </div>
        <div class="but">
            <div class="button" @click="binhuan">
                <van-icon name="replay" />
                <span>
                    换一批
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['id','name'],
        data() {
            return {
                contData:{},
                num:1
            }
        },
        created(){
            this.binhuan()
        },
        methods:{
            binhuan(){
                this.axios({
                    url:'GetClassPageSixComics',
                    params:{
                        id:this.id,
                        pageNum:this.num,
                        pageSize:6,
                        isAll:0,
                    }
                }).then(res =>{
                    if (res.status === 200) {
                        this.contData = res.data.data.roll_six_comics
                        this.num++
                    }
                })
            },
            gotoCartoon(item){
                
                this.$router.push({name:"CartoonContainer",query:{id:item.comic_id}})
            },
            gotoAll(item){
                
                this.$router.push({name:"AllCartoon",query:{id:this.id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .t3{
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 20px;
        .top{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .top_left{
                font-size: 16px;
                font-weight: 600;
            }
            .top_right{
                font-size: 12px;
                color: rgb(100, 100, 100);
            }
        }
        .cont{
            // margin-top: 10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .content{
                width: 31%;
                margin-top: 15px;
                .img{
                    width: 100%;
                    border-radius: 5px;
                    overflow: hidden;
                    min-height: 145px;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
                .name{
                    font-size: 13px;
                    line-height: 20px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                .title{
                    font-size: 12px;
                    color: rgb(100, 100, 100);
                    line-height: 20px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        }
        .but{
            width: 100%;
            height: 25px;
            margin-top: 20px;
            .button{
                width: 50%;
                height: 25px;
                border-radius: 25px;
                line-height: 25px;
                text-align: center;
                margin: 0 auto;
                background-color: rgb(220, 220, 220);
                span{
                    margin-left: 10px;
                }
            }
        }
    }
</style>